<template>
	<div class="announcement">
		<div class="announcement__overlay" v-show="show"></div>
		<div class="announcement__content" v-show="show">
			<div class="announcement__title">{{ title }}</div>
			<div class="announcement__body" >{{body}}</div>
			<div class="announcement__time">{{time}}</div>
			<div class="announcement__actions">
				<button class="announcement__button" @click="close">关闭</button>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		formatDate
	} from '@/utils/time.js'
	export default {
		name: "affiche",
		props: {
			title: String, // 公告标题
			body: String, // 公告内容
			show: Boolean, // 是否显示弹窗
			time: String,
		},
		methods: {
			close() {
				this.$emit('change', !this.show);
			}
		}
	}
</script>

<style scoped>
	/* 弹窗样式 */
	.announcement {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.announcement__overlay {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 1000;
	}

	.announcement__content {
		background-color: #fff;
		padding: 20px;
		border-radius: 8px;
		z-index: 1001;
		max-width: 90%;
		max-height: 90%;
		overflow-y: auto;
	}

	.announcement__title {
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.announcement__body {
		font-size: 16px;
		line-height: 1.5;
		margin-bottom: 20px;
		white-space: pre-wrap;
	}

	.announcement__time {
		font-size: 16px;
		line-height: 1.5;
		margin-bottom: 20px;
	}

	.announcement__actions {
		display: flex;
		justify-content: flex-end;
	}

	.announcement__button {
		padding: 6px 12px;
		background-color: #fff;
		border: 1px solid #ccc;
		border-radius: 4px;
		cursor: pointer;
	}
</style>